<!-- 主题颜色设置-->
<template>
  <div class="sel-color">
    <!--<div class="mulColor">-->
      <!--<el-radio-group v-model="themecolor" >-->
        <!--<el-radio label="20a0ff">浅蓝-20a0ff</el-radio>-->
        <!--<el-radio label="fa4f52">橙色-fa4f52</el-radio>-->
        <!--<el-radio label="0000ff">紫色-0000ff</el-radio>-->
        <!--<el-radio label="008000">草绿-008000</el-radio>-->
        <!--<el-radio label="00a597">蓝绿-00a597</el-radio>-->
        <!--<el-radio label="e01-B072681">灰红黄-e01-B072681</el-radio>-->
        <!--<el-radio label="e02-B088682">灰黄-e02-B088682</el-radio>-->
        <!--<el-radio label="e03-B09C683">灰土-e03-B09C683</el-radio>-->
        <!--<el-radio label="e04-A6B0684">灰黄绿-e04-A6B0684</el-radio>-->
        <!--<el-radio label="e05-85B0685">灰绿-e05-85B0685</el-radio>-->
        <!--<el-radio label="e06-68B09A6">灰绿蓝-e06-68B09A6</el-radio>-->
        <!--<el-radio label="e07-68A9B07">灰深蓝-e07-68A9B07</el-radio>-->
        <!--<el-radio label="e09-687CB09">灰深蓝-e09-687CB09</el-radio>-->
        <!--<el-radio label="e10-7468B010">灰深蓝-e10-7468B010</el-radio>-->
        <!--<el-radio label="e11-9368B011">灰深蓝-e11-9368B011</el-radio>-->
        <!--<el-radio label="e12-B0687412">灰深蓝-e12-B0687412</el-radio>-->
        <!--<el-radio label="e13-77644013">灰深蓝-e13-77644013</el-radio>-->
        <!--<el-radio label="e14-57714614">灰深蓝-e14-57714614</el-radio>-->
        <!--<el-radio label="e15-3A749815">灰深蓝-e15-3A749815</el-radio>-->
        <!--<el-radio label="e17-7375E317">灰深蓝-e17-7375E317</el-radio>-->
        <!--<el-radio label="e19-7D151519">灰深蓝-e19-7D151519</el-radio>-->
      <!--</el-radio-group>-->
    <!--</div>-->

    <div class="mod" @click="selShow()"><el-button type="primary" >主题选择</el-button></div>
    <div class="info" :style="selcolorinfo">
      <span class="md" @click="selColor('e01-B072681')" style="background: #B07268">灰红黄</span>
      <span class="md" @click="selColor('e02-B088682')" style="background: #B08868">灰黄</span>
      <span class="md" @click="selColor('e03-B09C683')" style="background: #B09C68">灰土</span>
      <span class="md" @click="selColor('e04-A6B0684')" style="background: #A6B068">灰黄绿</span>
      <span class="md" @click="selColor('e05-85B0685')" style="background: #85B068">灰绿</span>
      <span class="md" @click="selColor('e06-68B09A6')" style="background: #68B09A">灰绿蓝</span>
      <span class="md" @click="selColor('e07-68A9B07')" style="background: #68A9B0">灰深蓝</span>
      <span class="md" @click="selColor('e09-687CB09')" style="background: #687CB0">灰深蓝</span>
      <span class="md" @click="selColor('e10-7468B010')" style="background: #7468B0">灰深蓝</span>
      <span class="md" @click="selColor('e11-9368B011')" style="background: #9368B0">灰深蓝</span>
      <span class="md" @click="selColor('e12-B0687412')" style="background: #B06874">灰深蓝</span>
      <span class="md" @click="selColor('e13-77644013')" style="background: #776440">灰深蓝</span>
      <span class="md" @click="selColor('e14-57714614')" style="background: #577146">灰深蓝</span>
      <span class="md" @click="selColor('e15-3A749815')" style="background: #3A7498">灰深蓝</span>
      <span class="md" @click="selColor('e17-7375E317')" style="background: #7375E3">灰深蓝</span>
      <span class="md" @click="selColor('e19-7D151519')" style="background: #7D1515">灰深蓝</span>
      <span class="md" @click="selColor('20a0ff')" style="background: #20a0ff">浅蓝</span>
      <span class="md" @click="selColor('fa4f52')" style="background: #fa4f52">橙色</span>
      <span class="md" @click="selColor('0000ff')" style="background: #0000ff">紫色</span>
      <span class="md" @click="selColor('008000')" style="background: #008000">草绿</span>
      <span class="md" @click="selColor('00a597')" style="background: #00a597">蓝绿</span>
      <span style="float: left; width: 100%; height: 10px;"></span>
      <br/>
      <div  class="cloes-btn" @click="cloesBtn()"><el-button type="text">收起</el-button></div>
    </div>

  </div>
</template>

<script>
  import { toggleClass } from '@/utils/index'
    export default {
      name: "themeSet",
      data () {
        return {
          // themecolor:'',
          msg: 'Welcome to Your Vue.js App',
          selcolorinfo:{},
        }
      },
      methods:{
        selShow(){
          this.selcolorinfo = {'width':'246px','height':'330px','padding':'10px','border':'1px solid rgb(239, 239, 239)','box-shadow':' 0px 0px 10px #dad9d9'};
        },
        selColor(sel){
          this.$store.commit('setThemeColor',sel);
        },
        cloesBtn(){
          this.selcolorinfo = {'height':'0px','padding':'0px','border':'none','box-shadow':' 0px 0px 0px #dad9d9'};
        }
      },
      computed:{
        themecolor:{
          get(){
            return this.$store.state.themecolor;
          },
          set(val){
            this.$store.commit('setThemeColor',val);
          }
        }
      },
      watch:{
        themecolor:{
          handler(){
            toggleClass(document.body, "custom-" + this.themecolor);
          }
        }
      },
      mounted(){
        toggleClass(document.body, "custom-" + this.themecolor);
      },
    }
</script>

<style scoped>

</style>
